import {
  Button,
  Calendar,
  CalendarCard,
  Cell,
  Input,
  Popup,
  Radio,
} from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useState } from "react";
import dayjs from "dayjs";
import CommonTitle from "../CommonTitle/index";
import "./index.less";

const timeFormat = (timeValues) => {
  const startTime = dayjs(timeValues);
  const year = startTime.year();
  const month = startTime.month() + 1; // 注意：month 方法返回的是 0-11 的数字，所以需要加 1
  const date = startTime.date();
  return {
    year,
    month,
    date,
  };
};
const DaySelectPopforBing = ({ open, onClose, onConfirm }) => {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  // 结果状态
  const [status, setStatus] = useState("");

  const [timeValues, setTimeValues] = useState([]);

  const onChange = (values) => {
    console.log("日历变化哦了", values);
    setTimeValues(values);
    setStartDate(dayjs(values?.[0]).format("YYYY-MM-DD HH:mm:ss"));
    setEndDate(
      dayjs(values?.[1])
        .add(23, "hour")
        .add(59, "minute")
        .add(59, "second")
        .format("YYYY-MM-DD HH:mm:ss")
    );
  };
  const [date, setDate] = useState(undefined);
  const [isVisible, setIsVisible] = useState(false);

  const openSwitch = () => {
    setIsVisible(true);
  };

  const closeSwitch = () => {
    setIsVisible(false);
  };

  const setChooseValue = (param) => {
    console.log("param", {
      param,
      start: dayjs(param?.[0][3]).format("YYYY-MM-DD HH:mm:ss"),
    });
    setDate([...[param[0][3], param[1][3]]]);
    setStartDate(dayjs(param[0][3]).format("YYYY-MM-DD HH:mm:ss"));
    setEndDate(
      dayjs(param[1][3])
        .add(23, "hour")
        .add(59, "minute")
        .add(59, "second")
        .format("YYYY-MM-DD HH:mm:ss")
    );
  };

  const select = (param) => {
    console.log(param);
  };

  return (
    <Popup
      visible={open}
      style={{ padding: 15, width: "80%", height: "100%", overflow: "scroll" }}
      onClose={() => {
        // setShowBasic(false);
        onClose?.();
      }}
      position="right"
    >
      <View>
        <CommonTitle title="选择日期范围" />

        <Cell
          title="选择日期范围"
          description={date ? `${date[0]}至${date[1]}` : "请选择日期范围"}
          onClick={openSwitch}
        />
        <Calendar
          visible={isVisible}
          defaultValue={date}
          type="range"
          autoBackfill 
          endDate=""
          onClose={closeSwitch}
          onConfirm={setChooseValue}
          onDayClick={select}
          startDate="2022-12-22"
        />
        {/* <CalendarCard
          value={timeValues}
          type="range"
          onChange={onChange}
          // renderDay={renderDay}
          renderDayBottom={renderDayBottom}
        /> */}

        <CommonTitle
          title="选择状态"
          style={{
            marginTop: 12,
          }}
        />
        <Radio.Group
          style={{
            marginTop: 12,
          }}
          value={status}
          direction="horizontal"
          onChange={(e) => {
            setStatus(e);
          }}
        >
          <Radio value={0}>全部</Radio>
          <Radio value={1}>成功</Radio>
          <Radio value={2}>失败</Radio>
        </Radio.Group>
      </View>
      <View
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginTop: 12,
        }}
      >
        <Button
          onClick={() => {
            setStartDate("");
            setEndDate("");
            setTimeValues([]);
            setStatus(0);
            setDate(undefined)
          }}
          style={{
            width: "45%",
          }}
        >
          重置
        </Button>

        <Button
          style={{
            width: "45%",
          }}
          type="primary"
          onClick={() => {
            // 如果开始时间有，但是结束时间没有的情况下
            console.log("startDate", {
              startDate,
              endDate,
            });
            if (startDate && !endDate) {
              Taro.showToast({
                title: "请选择结束时间",
                icon: "none",
              });
              return;
            }
            onConfirm({ startDate, endDate, status });
            onClose?.();
          }}
        >
          确定
        </Button>
      </View>
    </Popup>
  );
};

export default DaySelectPopforBing;
